<template>
  <div class="chart_bot2">
    <div class="chart_bot2-title">近半年问题台账统计</div>
    <div id="chart_bot2"></div>
  </div>
</template>

<script>
const color = ['#FFC125', '#00BFFF']
export default {
  data() {
    return {
      // chart1的配置
      xAxisData: ['2022-4', '2022-5', '2022-6', '2022-7', '2022-8', '2022-9'],
      yAxisData1: [10, 13, 35, 17, 18, 15],
      yAxisData2: [23, 23, 20, 18, 19, 23],
      option: {
        textStyle: {
          fontSize: 14
        },
        color: ['#FFC125', '#00BFFF'],
        legend: {
          top: 5,
          icon: 'circle',
          right: '5%',
          top: '0',
          textStyle: {
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'axis',
          formatter: function (params) {
            let html = ''
            params.forEach((v) => {
              html += `<div style="color: #666;font-size: 14px;line-height: 24px">
                <span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${
                  color[v.componentIndex]
                };"></span>
                ${v.name}月 ${v.seriesName}  
                <span style="color:${
                  color[v.componentIndex]
                };font-weight:700;font-size: 18px;margin-left:5px">${
                v.value
              }</span>
                个`
            })
            return html
          },
          extraCssText:
            'background: #fff; border-radius: 0;box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);color: #333;',
          axisPointer: {
            type: 'shadow',
            shadowStyle: {
              color: '#002C8B',
              shadowColor: 'rgba(225,225,225,1)',
              shadowBlur: 5
            }
          }
        },
        grid: {
          top: '60',
          left: '4%',
          right: '4%',
          bottom: '40',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLabel: {
              //formatter: '2021-{value}',
              textStyle: {
                fontSize: 13,
                color: '#ffffff'
              }
            },
            axisLine: {
              lineStyle: {
                color: '#ffffff'
              }
            },
            data: []
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '单位（个）',
            axisLabel: {
              textStyle: {
                color: '#ffffff',
                fontSize: 13
              }
            },
            nameTextStyle: {
              color: '#ffffff',
              fontSize: 13,
              lineHeight: 40
            },
            // 分割线
            splitLine: {
              lineStyle: {
                type: 'dashed',
                color: '#E9E9E9'
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            // name: "2018",
            name: '新增问题',
            type: 'line',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: '#FFD700',
                shadowBlur: 3,
                shadowColor: '',
                shadowOffsetY: 3
              }
            },
            // markPoint: {
            //     symbol: 'pin', //标记(气泡)的图形
            //     symbolSize: 50, //标记(气泡)的大小
            //     itemStyle: {
            //         // color: '#4587E7', //图形的颜色。
            //         borderColor: '#000', //图形的描边颜色。支持的颜色格式同 color，不支持回调函数。
            //         borderWidth: 0, //描边线宽。为 0 时无描边。
            //         borderType: 'solid', //柱条的描边类型，默认为实线，支持 ‘solid’, ‘dashed’, ‘dotted’。
            //     },
            //     data: [
            //         { type: 'max', name: '最大值' },
            //         { type: 'min', name: '最小值' },
            //     ],
            // },
            // markLine: {
            //     data: [{ type: 'average', name: '平均值' }],
            // },
            //设置最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            symbol: 'circle', //数据交叉点样式
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(205,52,42, 0.5)'
                    },
                    {
                      offset: 0.8,
                      color: 'rgba(235,235,21, 0)'
                    }
                  ],
                  false
                ),
                shadowColor: 'rgba(0, 0, 0, 0.1)',
                shadowBlur: 10
              }
            },
            data: []
          },
          {
            name: '整改完成',
            type: 'line',
            smooth: false,
            symbolSize: 8,
            zlevel: 3,
            lineStyle: {
              normal: {
                color: "rgba(10,219,250)",
                shadowBlur: 3,
                shadowColor: 'rgba(0, 205, 102,0.5)',
                shadowOffsetY: 5
              }
            },
            //设置最大值最小值
            markPoint: {
              data: [
                {
                  type: 'max',
                  name: '最大值'
                },
                {
                  type: 'min',
                  name: '最小值'
                }
              ]
            },
            symbol: 'circle', //数据交叉点样式 (实心点)
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: "rgba(10,219,250,.3)"
                    },
                    {
                        offset: 1,
                        color: "rgba(10,219,250, 0)"
                    }
                ], false),
                shadowColor: 'rgba(10,219,250, 0.5)', //阴影颜色
                shadowBlur: 20
              }
            },
            data: []
          }
        ]
      }
    }
  },
  created() {},
  watch: {
    // activeTab(val) {
    //   console.log('新输入的值为：'+val); // 会输出新值
    // }
  },
  destroyed() {
    window.onresize = null
  },
  mounted() {
    this.drawEcharts()
  },
  methods: {
    drawEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById('chart_bot2'))
      // 使用刚指定的配置项和数据显示图表。
      myChart.clear()
      this.option.series[0].data = this.yAxisData1
      this.option.series[1].data = this.yAxisData2
      this.option.xAxis[0].data = this.xAxisData
      this.option && myChart.setOption(this.option)
      // 响应式变化
      window.addEventListener('resize', () => myChart.resize(), false)
    }
  }
}
</script>

<style lang="scss" scoped>
.chart_bot2 {
  float: left;
  width: calc(50% - 15px);
  margin-right: 15px;
  height: 100%;
  background-color: rgba(1, 35, 102, 0.8);
  //background-color: #012366;
  border-radius: 20px;
}
.chart_bot2-title {
  font-weight: bold;
  height: 48px;
  line-height: 48px;
  display: flex;
  align-items: center;
  font-size: 18px;
  justify-content: center;
}
#chart_bot2 {
  width: 100%;
  box-sizing: border-box;
  height: 92%;
  overflow: hidden;
}
</style>